<template>
  <div class="information">
    <div class="information-header">Base Information</div>
    <div class="information-c">
      <ul>
        <li>
          <span class="info-title">产品名称：</span>
          <span class="info-date">{{ handlerSummary.productName }} </span>
        </li>
        <li>
          <span class="info-title">MES批号：</span>
          <span class="info-date">{{ handlerSummary.lotId }} </span>
        </li>
        <li>
          <span class="info-title">生产流程：</span>
          <span class="info-date">{{ handlerSummary.processFlow }} </span>
        </li>
        <li>
          <span class="info-title">测试步骤：</span>
          <span class="info-date">{{ handlerSummary.trStep }} </span>
        </li>
        <li>
          <span class="info-title">程序名称：</span>
          <span class="info-date">{{ handlerSummary.trProgram }} </span>
        </li>
        <li>
          <span class="info-title">TROperID：</span>
          <span class="info-date">{{ handlerSummary.trOperId }} </span>
        </li>
        <li>
          <span class="info-title">{{ $t('eqpName') }}：</span>
          <span class="info-date">{{ handlerSummary.eqpId }} </span>
        </li>
        <li>
          <span class="info-title">StartTime：</span>
          <span class="info-date">{{ handlerSummary.startTime }} </span>
        </li>
        <li>
          <span class="info-title">封装形式：</span>
          <span class="info-date">{{ handlerSummary.packageType }} </span>
        </li>
        <li>
          <span class="info-title">客户名称：</span>
          <span class="info-date">{{ handlerSummary.custName }} </span>
        </li>
        <li>
          <span class="info-title">客户批号：</span>
          <span class="info-date">{{ handlerSummary.custLotId }} </span>
        </li>
        <li>
          <span class="info-title">工单号：</span>
          <span class="info-date">{{ handlerSummary. workOrder }} </span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Information',
  components: {},
  props: {
    handlerSummary: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>
<style lang='scss' scoped>
.information {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
  .information-header {
    width: 100%;
    height: 40px;
    background: #add7ff;
    color: #1a70c1;
    line-height: 40px;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .information-c {
    box-sizing: border-box;
    border: 1px solid #add7ff;
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 50%;
        display: flex;
        align-items: center;
        margin: 5px 0;
        .info-title {
          width: 30%;
          padding: 10px;
          text-align: right;
          background-color: #f4f7fc;
        }
        .info-date {
          width: 70%;
          padding: 0 10px;
          word-break: break-all;
          word-wrap: break-word;
          text-align: left;
        }
      }
    }
  }
}
</style>
